import React, { Component } from "react";
import { Card, Table } from "antd";
import axios from "../../axios/index";

export default class basicTable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      dataSource2: [],
      selectedRowKeys:[]
    };
  }

  componentDidMount() {
    const data = [
      {
        id: "0",
        key: "1",
        userName: "Jack",
        sex: "1",
        state: "1",
        interest: "1",
        birthday: "2000-01-01",
        address: "北京市海淀区奥林匹克公园",
        time: "09:00"
      },
      {
        id: "1",
        key: "2",
        userName: "Tom",
        sex: "1",
        state: "1",
        interest: "1",
        birthday: "2000-01-01",
        address: "北京市海淀区奥林匹克公园",
        time: "09:00"
      },
      {
        id: "2",
        key: "3",
        userName: "Lily",
        sex: "1",
        state: "1",
        interest: "1",
        birthday: "2000-01-01",
        address: "北京市海淀区奥林匹克公园",
        time: "09:00"
      }
    ];
    this.setState({
      dataSource: data
    });
  }

  //动态获取mock数据
  requst = () => {
    axios
      .ajax({
        url: "/table/list",
        data: {
          params: {
            page: 1
          }
        }
      })
      .then(res => {
        if (res.code === 0) {
          this.setState({
            dataSource2: res.result
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  };
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    });
  };
  render() {
    const columns = [
      {
        title: "id",
        key: "id",
        dataIndex: "id"
      },
      {
        title: "用户名",
        key: "userName",
        dataIndex: "userName"
      },
      {
        title: "性别",
        key: "sex",
        dataIndex: "sex",
        render(sex) {
          return sex === 1 ? "男" : "女";
        }
      },
      {
        title: "状态",
        key: "state",
        dataIndex: "state",
        render(state) {
          let config = {
            "1": "咸鱼一条",
            "2": "风华浪子",
            "3": "北大才子",
            "4": "百度FE",
            "5": "创业者"
          };
          return config[state];
        }
      },
      {
        title: "爱好",
        key: "interest",
        dataIndex: "interest",
        render(abc) {
          let config = {
            "1": "游泳",
            "2": "打篮球",
            "3": "踢足球",
            "4": "跑步",
            "5": "爬山",
            "6": "骑行",
            "7": "桌球",
            "8": "麦霸"
          };
          return config[abc];
        }
      },
      {
        title: "生日",
        key: "birthday",
        dataIndex: "birthday"
      },
      {
        title: "地址",
        key: "address",
        dataIndex: "address"
      },
      {
        title: "早起时间",
        key: "time",
        dataIndex: "time"
      }
    ];
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: "radio",
      selectedRowKeys
    };
    return (
      <div>
        <Card title="基础表格">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
          ></Table>
        </Card>

        <Card title="单选表格" style={{ margin: "10px 0 10px 0" }}>
          <Table
            bordered
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
          ></Table>
        </Card>

        <Card title="动态数据渲染表格">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={false}
          ></Table>
        </Card>
        <Card title="分页">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={true}
          ></Table>
        </Card>
      </div>
    );
  }
}
